<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MIUI注册系统</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <script src="../static/js/jquery.js"></script>
</head>
<body>
<div style="background-image: url('../static/img/暮色.jpg');width: 600px;height: 600px;background-size: cover;margin: 50px auto;padding:50px">
    <div  style="margin: 0 auto;width: 300px;">
        <h4 style="text-align: center;margin:0 0 20px 0;color: #ffffff">MIUI注册</h4>
        <label for="tel" class="form-label" style="margin-top: 35px;color: #20c997">Mobile:</label>
        <input type="text" name="username" placeholder="Enter your phone number" id="tel" class="form-control" style="width: 300px;margin: 5px 0;">
        <label for="sms" class="form-label" style="margin-top: 15px;color: #20c997;display: block">Code:</label>
        <input type="text" name="sms" placeholder="Enter your phone Code" id="sms"  class="form-control" style="width: 200px;margin: 5px 0; display: inline-block">
        <button class="btn btn-outline-secondary" id="code" style="width: 90px; margin:0 0 5px 5.5px;">验证码</button>
        <div style="text-align: center;margin: 25px 0 5px 0;font-size: 11px;">
            <input type="checkbox" id="is_check"><span >I have read and agree <a href="http://baidu.com">《用户服务协议》</a>and<a href="http://baidu.com">《隐私政策》</a> </span>
        </div>
        <div>
            <a href="http://laojiequ.cn/form" class="btn btn-outline-info" style="width: 80px;margin: 15px 0 0 0">Log on</a>

            <button  class="btn btn-outline-info" style="width: 80px;float:right; margin: 15px 0 0 15px" id="reg">Register</button>
        </div>

    </div>
</div>

</body>
</html>

<script>


    $("#code").click(function (){
        var mobile=$("#tel").val()
        if (mobile === ""){
            alert("手机号不能为空")
            return
        }
        $.ajax({
            url: "/sendSms",
            data: {
                "mobile":mobile,
            },
            type: "POST",
            dataType: "json",
            success: function (data){
                console.log(data)
                if (data.code!==200){
                    alert(data.message)
                    return
                }
                alert(data.message)
            },
            error: function (){
                alert("请求超时!!!")
            }
        })
    })

    $("#reg").click(function () {
        var  mobile = $("#tel").val()
        var  sms = $("#sms").val()
        var agreement = document.getElementById("is_check")
        // console.log(username+password+agreement.checked)
        if (mobile === ""||sms===""){
            alert("手机号或验证码不能为空")
            return
        }
        if (!agreement.checked) {
            alert("请阅读并勾选！")
            return
        }
        $.ajax({
            url:"/Register",
            data: {
                "mobile": mobile,
                "sms": sms,
            },
            type: "POST",
            dataType: "json",
            success: function (data){
                console.log(data)
                if (data.code!==200){
                    alert(data.message)
                    return
                }
                // alert(data.message)
                location.href="http://127.0.0.1:8080/list"
            },
            error: function (){
                alert("请求超时!!!")
            }

        })
    })


</script>